<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            map:null,
            bbox:null
        }
    },
    mounted(){
       this.init()
    },
    methods: {
        init(){
         this.smartmapx.mapbase = 'http://www.smartmapx.com';
          console.log( this.smartmapx)
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'map',
              mapId: 'map_id_1',
              center: [-100.486052, 37.830348],
              zoom: 2
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
            this.map.on('load',()=>{
                this.map.addSource('states', {
                'type': 'geojson',
                'data':
                'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
                });

                this.map.addLayer({
                'id': 'state-fills',
                'type': 'fill',
                'source': 'states',
                'layout': {},
                'paint': {
                'fill-color': '#a1dab4'}
                });

                this.map.addLayer({
                'id': 'state-borders',
                'type': 'line',
                'source': 'states',
                'layout': {},
                'paint': {
                'line-color': '#627BC1',
                'line-width': 2
                }
                });

                 this.map.addLayer({
                'id': 'state-high',
                'type': 'fill',
                'source': 'states',
                'layout': {},
                'paint': {
                'fill-outline-color': '#484896',
                'fill-color': '#6e599f',
                'fill-opacity': 0.75
                  },
                'filter': ['in', 'FIPS', '']
                });

                this.map.on('click',(e)=>{
                    console.log(e)
                  this.map.setPaintProperty('state-high', 'fill-color','green')
                //    this.bbox=[
                //        [e.point.x - 5, e.point.y - 5],
                //        [e.point.x + 5, e.point.y + 5]
                //     ]
                //     var features = this.map.queryRenderedFeatures(this.bbox, {
                //         layers: ['states']
                //         });
                //     var filter = features.reduce((memo, feature)=> {
                //         memo.push(feature.properties.FIPS);
                //         return memo;
                //         },
                //         ['in', 'FIPS']
                //         );
                //     this.map.setFilter('state-high', filter);
                })
            })
        }
    }
}
</script>
<style scoped>
   #map{
       width:100%;
       height:100%
   }
</style>